<template>
	<view>
		<view class="content">
			<view class="con1">
				<view class="left">
					<image :src="rq.imgUrl(item.user.avatar?item.user.avatar:' ')" mode="aspectFill"
						@click="toHome(item.user.id)"></image>
				</view>
				<view class="right">
					<view class="r1">
						<view class="name">
							{{item.user.nickname}}
						</view>
						<image src="https://pw.qyang.cc/static/svg/icon-realname.svg" v-if="item.user.is_real===1"
							style="width: 30rpx;height: 30rpx;margin: 0 20rpx;">
						</image>
						<view class="tuijian" v-if="item.recommend===1">
							<i class="iconfont" style="font-size: 12px;margin-right: 4rpx;">&#xe6c8</i>小编推荐
						</view>
						<view class="fenlei">
							<view class="fenlei1">
								{{item.category.name}}
							</view>
						</view>
					</view>
					<view class="r2">
						<view class="r2-sex1" v-if="item.user.gender == 1">
							<image src="https://pw.qyang.cc/static/sexW.png"
								style="width: 20rpx;height: 20rpx;margin-right: 10rpx;">
							</image>{{item.user.age?item.user.age:''}}
						</view>
						<view class="r2-sex2" v-if="item.user.gender == 0">
							<image src="https://pw.qyang.cc/static/sexM.png"
								style="width: 20rpx;height: 20rpx; margin-right: 10rpx;">
							</image>{{item.user.age?item.user.age:''}}
						</view>
						<view class="r2-con">
							&nbsp;&nbsp;{{item.user.cm?item.user.cm:'--'}}cm &nbsp;&nbsp;
							{{item.user.kg?item.user.kg:'--'}}kg
						</view>
						<view class="r2-time">
							{{item.createtime}}
						</view>
					</view>
					<view class="r3" v-if="item.user.tags">
						<view class="tabs">
							<view class="tabs-item" v-for="i,b in item.user.tags" :key="b" :style="{background:i.color}">
								{{i.name}}
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- #ifndef APP -->
			<view class="con2" v-if="item.image&&item.image.length>0">
				<swiper class="swiper" indicator-active-color="#FFFFFF" circular autoplay="true" @change="swiperChange" :indicator-dots="true">
					<swiper-item v-for="(i,index) in item.image" :key="index">
						<video @click="previewMedia(item,index)" :src="index==currentIndex?i:''" autoplay loop :controls="false" v-if="i.includes('.mp4')" style="width: 100%;height: 100%"></video>
						<image v-else @click="previewMedia(item,index)" :src="i" mode="aspectFill" class="syimg1"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP -->
			<view class="con2" v-if="item.str&&item.str.length>0">
				<swiper class="swiper" indicator-active-color="#FFFFFF" circular autoplay="true" @change="swiperChange" :indicator-dots="true">
					<swiper-item v-for="(i,index) in item.str" :key="index">
						<image v-if="i.type=='video'" src="https://pw.qyang.cc/static/svg/playVideo.svg"
							class="play_icon"></image>
						<image  @click="previewMedia(item,index)" :src="i.url" mode="aspectFill" class="syimg1"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- #endif -->
			<view class="con3">
				{{item.content}}
			</view>
			<view class="con4">
				<view :class="a.type===0?'r6':'r7'" v-for="a in item.activity" @click="toActivity(a)">
					<image
						:src="a.type===0?'https://pw.qyang.cc/static/icon2.png':'https://pw.qyang.cc/static/svg/xin.svg'"
						mode="aspectFit">
					</image>
					{{a.name}}
				</view>
				<view class="r9" v-if="item.location">
					<image src="https://pw.qyang.cc/static/svg/dingwei.svg" mode="aspectFit">
					</image>
					{{item.location}}
				</view>
				<view class="r10">
					发布于 {{item.createtime}}
					<image @click="handleShowMore(item)" src="https://pw.qyang.cc/static/svg/black-3dian.svg"
						mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="comment-content">
			<view class="text">
				共{{item.comment_num}}条评论
			</view>
			<view class="comment-list" v-for="(i,index) in item.comment" :key="index">
				<view class="con1">
					<view class="left">
						<image :src="i.user.avatar?rq.imgUrl(i.user.avatar):''" mode="scaleToFill"
							@click="toHome(i.user_id)"></image>
					</view>
					<view class="right">
						<view class="r1">
							<view class="name">
								{{i.user.nickname}}
							</view>
							<image src="https://pw.qyang.cc/static/svg/icon-realname.svg" v-if="i.user.is_real===1"
								style="width: 30rpx;height: 30rpx;margin: 0 20rpx;">
							</image>
							<view class="r2-sex1" v-if="i.user.gender == 1">
								<image src="https://pw.qyang.cc/static/sexW.png"
									style="width: 20rpx;height: 20rpx;margin-right: 10rpx;">
								</image>{{i.user.age?i.user.age:''}}
							</view>
							<view class="r2-sex2" v-if="i.user.gender == 0">
								<image src="https://pw.qyang.cc/static/sexM.png"
									style="width: 20rpx;height: 20rpx; margin-right: 10rpx;">
								</image>{{i.user.age?i.user.age:''}}
							</view>
						</view>
						<view class="r2" v-if="i.tags&&i.tags.length>0">
							<view class="tabs">
								<view class="tabs-item" v-for="j,b in i.tags" :key="b" :style="{background:j.color}">
									{{j.name}}
								</view>
							</view>
						</view>
						<view class="r3" @longtap="handleShowComment(i,i.id)">
							<span>{{i.content}}</span><span
								class="r3-time">{{i.createtime}}</span><span class="r3-huifu"
								@click.stop="handleComment(i,i.id)">回复</span>
						</view>
						<view class="r-second" v-if="i.child">
							<view class="con1" v-for="(itm, c) in i.child" :key="c" v-if="c === 0 || i.showAllComments">
								<view class="left">
									<image style="width: 22px;height: 22px;" :src="rq.imgUrl(itm.user.avatar)"
										mode="scaleToFill" @click="toHome(itm.user_id)">
									</image>
								</view>
								<view class="right">
									<view class="r1">
										<view class="name">
											{{itm.user.nickname}}
										</view>
										<view class="author" v-if="itm.oneself">作者</view>
										<view class="name" v-if="itm.on_user">
											<image src="/static/reply.png"></image>{{itm.on_user.nickname}}
										</view>
									</view>
									<view class="r3">
										<span @longtap="handleShowComment(itm,i.id)">{{itm.content}}</span><span
											class="r3-time">{{itm.createtime}}</span><span class="r3-huifu"
											@click="handleComment(itm,i.id)">回复</span>
									</view>
								</view>
							</view>
							<!-- 根据评论数量判断是否显示展开剩余评论按钮 -->
							<view v-if="i.child.length > 1">
								<view class="r-second-text" @click="toggleComments(index)">
									{{i.showAllComments?'收起':'展开'}}{{i.child.length-1}}条回复</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom" v-if="isShow===1">
			<view class="b">
				<view class="input input-text">
					<i class="iconfont" style="margin: 10rpx;" @click="search">&#xe60a</i>
					<input class="text" type="text" placeholder="说点什么..." v-model="commentContent" confirm-type="send"
						@confirm="sendComment('reply')" />
				</view>
				<view class="input-btn" @click="sendComment('reply')">
					发送
				</view>
			</view>
		</view>
		<view class="bottom" v-if="isShow===0">
			<view class="b">
				<view class="input">
					<i class="iconfont" style="margin: 10rpx;" @click="search">&#xe60a</i>
					<input class="text" type="text" placeholder="说点什么..." v-model="commentContent" confirm-type="send"
						@confirm="sendComment" />
				</view>
				<view class="image" @click="handleZan(item)">
					<image :src="item.is_upvote?'https://pw.qyang.cc/static/is_upvote.png':'https://pw.qyang.cc/static/black-xin.png'"
						mode="aspectFit"></image> {{item.upvote_num}}
				</view>
				<view class="image" @click="handleCang(item)">
					<image
						:src="item.is_collect===1?'https://pw.qyang.cc/static/is_collect.png':'https://pw.qyang.cc/static/black-shoucang.png'"
						mode="aspectFit"></image>
					{{item.collect_num}}
				</view>
				<!-- #ifndef H5 -->
				<button open-type="share" class="share" @click="handleShare(item)">
					<view class="image">
						<image src="https://pw.qyang.cc/static/black-fenxiang.png" mode="aspectFit"></image>
					</view>
				</button>
				<!-- #endif -->
			</view>
		</view>
		<!-- 展示更多——举报 -->
		<u-popup :show="showMore" :round="10" mode="bottom" @close="hideShowMore">
			<view class="pop-content">
				<view class="text" @click="goReport()">
					举报
				</view>
				<view class="bottom">
					<view class="btn" @click="hideShowMore">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 展示更多——自己的帖子 -->
		<u-popup :show="showMore1" :round="10" mode="bottom" @close="hideShowMore1">
			<view class="pop-content">
				<view class="text" @click="edit">
					编辑
				</view>
				<view class="text" style="color: #FF7681;" @click="del()">
					删除
				</view>
				<view class="bottom">
					<view class="btn" @click="hideShowMore1">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 长按——别人的评论 -->
		<u-popup :show="showComment" :round="10" mode="bottom" @close="hideShowComment">
			<view class="pop-content">
				<view class="text" @click="handleComment(showItem,showItemId)">
					回复
				</view>
				<view class="text" @click="goReport('commit')">
					举报
				</view>
				<view class="bottom">
					<view class="btn" @click="hideShowComment">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 长按——自己的评论 -->
		<u-popup :show="showComment1" :round="10" mode="bottom" @close="hideShowComment1">
			<view class="pop-content">
				<view class="text" @click="handleComment(showItem,showItemId)">
					回复
				</view>
				<view class="text" style="color: #FF7681;" @click="delCommit(showItem)">
					删除
				</view>
				<view class="bottom">
					<view class="btn" @click="hideShowComment1">
						取消
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showMore: false,
				showMore1: false,
				showComment: false,
				showComment1: false,
				isShow: 0,
				commentContent: '',
				item: {},
				id: null,
				commentItem: {},
				showItem: {},
				showItemId: null,
				currentIndex:0
			};
		},
		onLoad(opt) {
			this.id = opt.id
		},
		onShow() {
			this.getDetail()
		},
		onShareAppMessage() {
			return {
				title: '动态详情',
				path: '/pages/square/detail?id=' + this.id,
			}
		},
		onShareTimeline() {
			return {
				title: '动态详情',
				path: '/pages/square/detail?id=' + this.id,
			}
		},
		methods: {
			toActivity(item) {
				if (item.type === 0) {
					uni.navigateTo({
						url: '/subpages/activity/detail?id=' + item.id
					})
				}
			},
			handleShare(item) {
				let _this = this
				//#ifdef APP
				uni.share({
				    provider: 'weixin',
				    scene: "WXSceneSession",
				    type: 5,
				    imageUrl:'https://pw.qyang.cc/static/basicprofile.png',
				    title: '动态详情',
				    miniProgram: {
				        id: 'gh_30c9bdca022b',
				        path: 'pages/square/detail?id=' + _this.id,
				        type: _this.rq.isTest?2:0,
				        webUrl: 'https://pw.qyang.cc'
				    },
				    success: ret => {
				        console.log(JSON.stringify(ret));
				    },
					fail: (err) => {
						console.log(JSON.stringify(err));
					}
				});
				//#endif
			},
			hideShowComment() {
				this.showComment = false
			},
			hideShowComment1() {
				this.showComment1 = false
			},
			hideShowMore() {
				this.showMore = false
			},
			hideShowMore1() {
				this.showMore1 = false
			},
			del() {
				this.rq.getData('dynamic/delete', {
					id: this.id
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: '删除成功~',
							icon: 'none'
						})
						this.showMore = false
						this.showMore1 = false
						this.showComment = false
						this.showComment1 = false
					}
				})
			},
			delCommit() {
				this.rq.getData('dynamic/comment_del', {
					id: this.showItem.id
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: '删除成功~',
							icon: 'none'
						})
						this.getDetail()
						this.showMore = false
						this.showMore1 = false
						this.showComment = false
						this.showComment1 = false
					}
				})
			},
			edit() {
				uni.navigateTo({
					url: '/pages/square/publish?id=' + this.id
				})
			},
			getDetail() {
				this.rq.getData('dynamic/dynamic_dateil', {
					id: this.id
				}).then(res => {
					this.item = res.data
					this.item.image = res.data.image.map(i => {
						return this.rq.imgUrl(i)
					})
					this.item.comment.map(item => {
						item.showAllComments = false
					})
				})
			},
			toggleComments(index) {
				let item = this.item.comment[index]
				item.showAllComments = !item.showAllComments
				this.item.comment.splice(index, 1, item)
				console.log(this.item.comment)
			},
			handleShowMore(item) {
				let userInfo = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')) : null
				this.groupId = userInfo.group_id

				this.showItem = item
				// 是自己发布的帖子
				if (item.user.id == userInfo.id) {
					this.showMore1 = true
				} else {
					// 别人发布的——举报
					this.showMore = true
				}
			},
			handleShowComment(i, id) {
				let userInfo = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')) : null
				this.showItem = i
				this.showItemId = id
				console.log(i.user_id, userInfo.id)
				if (i.user_id == userInfo.id) {
					this.showComment1 = true
				} else {
					this.showComment = true
				}
			},
			handleComment(item, id) {
				this.showItem = item
				this.commentItem = item
				this.commentItem.on_pid = id
				this.isShow = 1;
				this.showComment = false;
				this.showComment1 = false
			},
			swiperChange(e){
				this.currentIndex = e.detail.current
			},
			sendComment(type) {
				if (this.commentContent) {
					let params = {}
					if (type == 'reply') {
						params = {
							pid: this.commentItem.id,
							on_pid: this.commentItem.on_pid,
							dynamic_id: this.id,
							content: this.commentContent,
							on_user_id: this.commentItem.user_id
						}
					} else {
						params = {
							pid: 0,
							on_pid: 0,
							dynamic_id: this.id,
							content: this.commentContent,
							on_user_id: 0
						}
					}
					this.rq.getData('dynamic/comment', params).then(res => {
						if (res.code == 1) {
							this.commentContent = ''
							this.commentItem = {}
							this.isShow = 0
							this.getDetail()
						}
					})
				}
			},
			handleZan(item) {
				this.rq.getData('collect/set_upvote', {
					id: item.id,
					class: 'upvote',
					type: 1
				}).then(res => {
					if (res.code === 1) {
						this.item.is_upvote = this.item.is_upvote == 1 ? 0 : 1
						this.item.upvote_num = this.item.is_upvote == 1 ? this.item.upvote_num + 1 : this.item
							.upvote_num - 1
					}
				})
			},
			handleCang(item) {
				this.rq.getData('collect/set_upvote', {
					id: item.id,
					class: 'collect',
					type: 1
				}).then(res => {
					if (res.code === 1) {
						this.item.is_collect = this.item.is_collect == 1 ? 0 : 1
						this.item.collect_num = this.item.is_collect == 1 ? this.item.collect_num + 1 : this.item
							.collect_num - 1
					}
				})
			},
			previewMedia(item, media) {
				uni.navigateTo({
					url: '/pages/square/picDetail?id=' + item.id + '&index=' + media
				})
			},
			goReport(type) {
				// 举报评论
				if (type == 'commit') {
					var item = this.showItem
					this.showMore = false
					this.showComment = false
					this.showComment1 = false
					uni.navigateTo({
						url: `/pages/square/report?id=${item.id}&type=commit`
					})
				} else {
					// 举报帖子
					var item = this.showItem
					// this.showMore = false
					this.showMore1 = false
					this.showComment = false
					this.showComment1 = false
					uni.navigateTo({
						url: `/pages/square/report?id=${item.id}`
					})
				}
			},
			toHome(id) {
				uni.navigateTo({
					url: '/subpages/talent/talent?id=' + id
				})
			},
			goPage(url, item) {
				if (item) {
					const id = JSON.stringify(item)
					uni.navigateTo({
						url: `/pages/square/${url}?id=${id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/square/${url}`
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.share {
		padding: 0;
		margin: 0;
		background-color: transparent;

		&::after {
			display: none;
		}
	}

	.comment-content {
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-bottom: 100rpx;

		.text {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 13px;
			font-weight: normal;
			line-height: 11px;
			letter-spacing: 0px;
			color: #666666;
			margin-bottom: 20rpx;
		}

		.comment-list {
			.con1 {
				display: flex;

				.left {
					max-width: 45px;
					margin: 20rpx 0;

					image {
						width: 33px;
						height: 33px;
						border-radius: 50%;
					}
				}

				.right {
					width: 80%;
					padding-bottom: 20rpx;
					// border-bottom: 1px solid #F4F4F4;

					.r1 {
						display: flex;
						align-items: center;
						margin: 20rpx 20rpx 10rpx;

						.name {
							font-family: 阿里巴巴普惠体 2.0;
							font-size: 13px;
							font-weight: normal;
							line-height: 13px;
							letter-spacing: 0px;
							display: flex;
							align-items: center;

							color: #909298;

							image {
								width: 16px;
								height: 16px;
								display: inline-block;
							}
						}

						.author {
							height: 30rpx;
							line-height: 30rpx;
							border-radius: 22px;
							opacity: 1;
							background: #FF7883;
							font-family: 阿里巴巴普惠体 2.0;
							font-size: 9px;
							font-weight: normal;
							letter-spacing: 0px;
							color: #FFFFFF;
							padding: 0 15rpx;
							margin-left: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.r2-sex1 {
							display: flex;
							width: 42px;
							height: 16px;
							border-radius: 88px;
							opacity: 1;
							background: rgba(116, 220, 254, 0.2);

							font-size: 11px;
							font-weight: 500;
							line-height: 15px;
							display: flex;
							align-items: center;
							justify-content: center;
							letter-spacing: 0px;
							color: #2BC1F1;

						}

						.r2-sex2 {
							display: flex;
							width: 42px;
							height: 16px;
							border-radius: 88px;
							opacity: 1;

							background: rgba(253, 168, 175, 0.2);

							font-size: 11px;
							font-weight: 500;
							line-height: 15px;
							display: flex;
							align-items: center;
							justify-content: center;
							letter-spacing: 0px;
							color: #FDA8AF;

						}
					}

					.r2 {
						display: flex;
						margin-left: 20rpx;

						.tabs {
							display: flex;
							flex-wrap: wrap;
							position: relative;
							margin-top: 15rpx;
							height: 22px;
							overflow: hidden;

							.tabs-item {
								font-family: PingFang SC;
								font-size: 12px;
								font-weight: normal;
								line-height: 18px;
								display: flex;
								align-items: center;
								justify-content: center;
								letter-spacing: 0px;
								color: #FFFFFF;
								// width: 59px;
								padding: 0 10rpx;
								height: 22px;
								border-radius: 20px;
								opacity: 1;
								background: #FF6C91;
								margin-right: 15rpx;
								margin-bottom: 10rpx;
							}
						}
					}

					.r3 {
						font-family: 阿里巴巴普惠体 2.0;
						font-size: 26rpx;
						font-weight: normal;
						line-height: 26rpx;
						color: #333333;
						padding-left: 20rpx;
						padding-top: 15rpx;

						.r3-time {
							font-family: 阿里巴巴普惠体 2.0;
							font-size: 22rpx;
							font-weight: normal;
							line-height: 22rpx;
							color: #909298;
							margin: 0 20rpx;
						}

						.r3-huifu {
							font-family: 阿里巴巴普惠体 2.0;
							font-size: 11px;
							font-weight: normal;
							line-height: 12px;
							letter-spacing: 0px;
							color: #333333;
						}
					}

					.r-second-text {
						font-family: 阿里巴巴普惠体 2.0;
						font-size: 12px;
						font-weight: normal;
						line-height: 12px;
						letter-spacing: 0px;
						color: #FF7883;
						padding: 0 40rpx;
					}
				}
			}
		}
	}

	.content {
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.con4 {
			display: flex;
			flex-direction: column;

			.r6 {
				display: block;
				line-height: 11px;
				padding: 7px 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%;
				// height: 28px;
				border-radius: 4px;
				opacity: 1;

				background: rgba(0, 188, 86, 0.05);
				font-size: 11px;
				font-weight: normal;
				line-height: 12px;
				letter-spacing: 0px;
				margin: 10rpx 0;
				color: #00BC56;

				image {
					width: 13px;
					height: 13px;
					margin: 0 20rpx;
				}
			}

			.r7 {
				display: block;
				line-height: 11px;
				padding: 7px 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%;
				// height: 28px;
				border-radius: 4px;
				opacity: 1;

				background: rgba(255, 119, 43, 0.05);
				font-size: 11px;
				font-weight: normal;
				line-height: 12px;
				letter-spacing: 0px;
				margin: 10rpx 0;
				color: #FF772B;

				image {
					width: 13px;
					height: 13px;
					margin: 0 20rpx;
				}
			}

			.r9 {
				display: flex;
				align-items: center;
				width: 100%;
				height: 28px;
				border-radius: 4px;
				opacity: 1;

				font-size: 11px;
				font-weight: normal;
				line-height: 12px;
				letter-spacing: 0px;
				margin: 10rpx 0;
				color: #666666;

				image {
					width: 13px;
					height: 13px;
					margin: 0 20rpx;
					flex-shrink: 0;
				}
			}

			.r10 {
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 12px;
				font-weight: normal;
				line-height: 12px;
				letter-spacing: 0px;
				color: #999999;
				padding: 10rpx 20rpx;
				display: flex;
				justify-content: space-between;

				image {
					width: 16px;
					height: 16px;
				}
			}
		}

		.con3 {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 14px;
			font-weight: normal;
			line-height: 21px;
			letter-spacing: 0px;
			color: #333333;
			white-space: pre-wrap;
			padding: 20rpx;
		}

		.con2 {
			.swiper {
				height: 640rpx;
				position: relative;
				.syimg1 {
					width: 100%;
					height: 100%;
					object-fit: contain;
					border-radius: 20rpx;
				}
				.play_icon{
					    position: absolute;
					    z-index: 99;
					    left: 330rpx;
					    top: 280rpx;
					    width: 90rpx;
					    height: 90rpx;
				}
			}
		}

		.con1 {
			display: flex;

			.left {
				max-width: 45px;
				margin: 20rpx 0;

				image {
					width: 44px;
					height: 44px;
					border-radius: 50%;
				}
			}

			.right {
				width: 80%;

				.r1 {
					display: flex;
					align-items: center;
					margin: 20rpx;

					.name {
						font-size: 18px;
						font-weight: 500;
						line-height: 17px;
						letter-spacing: 0px;

						color: #000000;
					}

					.tuijian {
						width: 79px;
						height: 24px;
						border-radius: 33px;
						opacity: 1;

						background: #FF7681;
						font-size: 12px;
						font-weight: normal;
						line-height: 18px;
						letter-spacing: 0px;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFFFFF;
					}

					.fenlei {
						min-width: 72px;
						max-width: 100px;
						height: 24px;
						border-radius: 33px;
						opacity: 1;

						background: rgba(251, 182, 187, 0.14);
						font-size: 12px;
						font-weight: normal;
						line-height: 18px;
						letter-spacing: 0px;
						color: #F7635C;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						right: 0;
						margin-right: 40rpx;
						padding: 0 10rpx;

						.fenlei1 {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
						}
					}
				}

				.r2 {
					display: flex;
					align-items: center;
					font-size: 12px;
					font-weight: normal;
					line-height: 12px;
					letter-spacing: 0px;
					color: #999999;

					.r2-con {
						margin-left: 20rpx;
					}

					.r2-time {
						margin-right: 40rpx;
						position: absolute;
						right: 0;
					}

					.r2-sex1 {
						display: flex;
						width: 42px;
						height: 16px;
						border-radius: 88px;
						opacity: 1;
						background: rgba(116, 220, 254, 0.2);

						font-size: 11px;
						font-weight: 500;
						line-height: 15px;
						display: flex;
						align-items: center;
						justify-content: center;
						letter-spacing: 0px;
						color: #2BC1F1;

					}

					.r2-sex2 {
						display: flex;
						width: 42px;
						height: 16px;
						border-radius: 88px;
						opacity: 1;

						background: rgba(253, 168, 175, 0.2);

						font-size: 11px;
						font-weight: 500;
						line-height: 15px;
						display: flex;
						align-items: center;
						justify-content: center;
						letter-spacing: 0px;
						color: #FDA8AF;

					}
				}

				.r3 {
					display: flex;

					.tabs {
						display: flex;
						flex-wrap: wrap;
						position: relative;
						margin: 15rpx 0;

						.tabs-item {
							font-family: PingFang SC;
							font-size: 24rpx;
							font-weight: normal;
							line-height: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #FFFFFF;
							width: 118rpx;
							height: 44rpx;
							border-radius: 44rpx;
							opacity: 1;
							background: #FF6C91;
							margin-right: 15rpx;
							margin-bottom: 10rpx;
						}
					}
				}
			}
		}
	}

	.bottom {
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(112, 112, 112, 0.08);
		display: flex;
		align-items: center;
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 92rpx;

		.b {
			width: 90%;
			display: flex;
			align-items: center;
			margin: 10rpx auto;
			justify-content: space-between;
		}

		.input {
			display: flex;
			align-items: center;
			width: 46%;
			border-radius: 99px;
			opacity: 1;
			background: #FCF9F9;
			box-sizing: border-box;
			border: 1px solid #333333;

			.text {
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 13px;
				font-weight: normal;
				line-height: 13px;
				letter-spacing: 0px;

				color: #999999;
			}
		}

		.input-text {
			width: 80%;
		}

		.input-btn {
			width: 61px;
			height: 50rpx;
			border-radius: 102px;
			opacity: 1;
			background: #FF5866;
			border: 1px solid #FF5866;
			font-family: PingFang SC;
			font-size: 13px;
			font-weight: normal;
			line-height: 15px;
			text-align: center;
			letter-spacing: 0px;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.image {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 18px;
			font-weight: normal;
			line-height: 13px;
			letter-spacing: 0px;
			color: #333333;
			display: flex;
			align-items: center;

			image {
				width: 16px;
				height: 16px;
				margin-right: 10rpx;
			}
		}
	}

	.pop-content {
		font-family: PingFang SC;
		font-size: 15px;
		background: #fff;
		font-weight: normal;
		line-height: 15px;
		text-align: center;
		letter-spacing: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 20rpx;

		.text {
			width: 100%;
			margin-bottom: 20rpx;
			color: #000000;
			line-height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.bottom {
			width: 100%;
			height: 59px;
			opacity: 1;
			background: #FFFFFF;
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
			font-family: PingFang SC;
			font-size: 15px;
			font-weight: normal;
			line-height: 15px;
			text-align: center;
			letter-spacing: 0px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			// position: absolute;
			bottom: 0;

			.btn {
				width: 80%;
				height: 70rpx;
				border-radius: 102px;
				background: #FF5866;
				border: 1px solid #FF5866;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

	}
</style>